﻿<UserControl
    x:Class="NewsReaderApp.Views.PortraitView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NewsReaderApp.Views"
    xmlns:converters="using:NewsReaderApp.Helpers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="768">
    <UserControl.Resources>
        <local:DefaultTemplateSelector x:Key="feedInfoCTS" DefaultTemplate="{StaticResource FeedInfoTemplate}"/>
        <local:DefaultTemplateSelector x:Key="feedItemCTS" DefaultTemplate="{StaticResource FeedItemTemplate}"/>

        <Storyboard x:Key="showSelector" Storyboard.TargetName="itemSelector" FillBehavior="HoldEnd">
            <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Duration="0">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation  Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" To="1.0"/>
        </Storyboard>

        <Storyboard x:Key="hideSelector" Storyboard.TargetName="itemSelector" FillBehavior="HoldEnd">
            <DoubleAnimation  Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>

            <ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="Visibility" Duration="0:0:0.2">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>
    <Grid>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="60" />
                <RowDefinition MaxHeight="140" Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="255"/>
                <ColumnDefinition Width="255"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="{StaticResource AppName}" Grid.Row="0"
                       Grid.ColumnSpan="3" HorizontalAlignment="Right"
                       Style="{StaticResource BasicTextStyle}"
                       Margin="3" 
                       VerticalAlignment="Center"
                       FontSize="25"/>
            <Grid Grid.Row="0" Margin="3" 
                 x:Name="selectedFeed" Tapped="HandleSelectorClick">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource SelectedItemBackgroundThemeBrush}" CornerRadius="3">
                    <ContentControl VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch" Content="{Binding SelectedFeed}" 
                        HorizontalContentAlignment="Stretch" 
                        VerticalContentAlignment="Stretch" ContentTemplateSelector="{StaticResource feedInfoCTS}"/>
                </Border>
                <TextBlock Grid.Column="1" Text=">" FontSize="30"  VerticalAlignment="Center"/>
            </Grid>
            <Border Margin="3" Background="{StaticResource SelectedItemBackgroundThemeBrush}" CornerRadius="3"
                    Grid.Row="0" Grid.Column="1" DataContext="{Binding SelectedFeed}"
                    x:Name="selectedFeedItem" Tapped="HandleSelectorClick">
                <ContentControl  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                        Background="{StaticResource SelectedItemBackgroundThemeBrush}"
                        HorizontalContentAlignment="Stretch"
                        VerticalContentAlignment="Stretch"                                
                        ContentTemplateSelector="{StaticResource feedItemCTS}"
                        Content="{Binding SelectedItem}"/>
            </Border>
            <Grid  Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="102" Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border HorizontalAlignment="Left" BorderThickness="0" 
                                Visibility="{Binding Path=SelectedFeed.SelectedItem.ImageUriExists, Converter={StaticResource boolToVis}}">
                    <Image Source="{Binding SelectedFeed.SelectedItem.ImageUri}" Stretch="Uniform" Margin="1" MaxWidth="100"/>
                </Border>
                <TextBlock Grid.Column="1" VerticalAlignment="Stretch"
                       Style="{StaticResource BasicTextStyle}"
                       TextWrapping="Wrap"
                       Text="{Binding SelectedFeed.SelectedItem.Title, Mode=TwoWay}"
                       FontSize="30" 
                       Margin="2" />
                <TextBlock Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" 
                       Style="{StaticResource BasicTextStyle}"
                       TextWrapping="Wrap"
                       FontSize="30" 
                       Margin="2">
                    <TextBlock.Text>
                        <Binding Path="SelectedFeed.SelectedItem.PublishedTime" 
                                 Converter="{StaticResource dateFormatter}" 
                                 ConverterParameter="dddd, MMMM dd, yyyy hh:mm tt"/>
                    </TextBlock.Text>
                </TextBlock>
            </Grid>

            <Border Style="{StaticResource ContentBorder}" DataContext="{Binding SelectedFeed}" Grid.ColumnSpan="3"  Grid.Row="2" 
                         Margin="2,0,2,0">
                <Border.Resources>
                    <converters:NewsTextToXamlConverter x:Key="newsToXaml"/>
                </Border.Resources>

                <local:CustomFlipView ItemsSource="{Binding FeedItems, Mode=TwoWay}" x:Name="contentViewHolder"  
                          SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
                    <FlipView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </FlipView.ItemsPanel>
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <ScrollViewer Style="{StaticResource VerticalScrollViewerStyle}" 
                                  HorizontalScrollBarVisibility="Disabled" 
                                  VerticalScrollBarVisibility="Auto"
                                  FlowDirection="{Binding Path=Content.FlowDirection, RelativeSource={RelativeSource Self}}"
                                  x:Name="contentView">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Image Source="{Binding ImageUri}" Stretch="Uniform" Margin="1" MaxHeight="150" HorizontalAlignment="Left"
                                       Visibility="{Binding ImageUri, Converter={StaticResource nullToVis}}"/>
                                    <Grid  Grid.Row="1" DataContext="{Binding Path=FullText, Converter={StaticResource newsToXaml}}">
                                        <ContentPresenter Content="{Binding}"/>
                                        <StackPanel Orientation="Vertical"  Opacity=".7" 
                                                 Visibility="{Binding Converter={StaticResource negNullToVis}}"
                                                HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <ProgressRing Foreground="{StaticResource ApplicationForegroundThemeBrush}" Height="60" Width="60"
                                               IsActive="True" 
                                               Margin="5" />
                                            <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                                                   Text="Loading..." HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </StackPanel>
                                    </Grid>
                                </Grid>
                            </ScrollViewer>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </local:CustomFlipView>
            </Border>
            <Grid Opacity="0" x:Name="itemSelector" MaxHeight="700" VerticalAlignment="Top" Margin="2" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <ListView Grid.Column="0" x:Name="feedList"
                          ItemsSource="{Binding Feeds}"
                          SelectedItem="{Binding SelectedFeed, Mode=TwoWay}"
                          ItemTemplate="{StaticResource FeedInfoTemplate}">

                </ListView>
                <ListView Grid.Column="1" x:Name="feedItemList"
                          ItemsSource="{Binding SelectedFeed.FeedItems}"
                          SelectedItem="{Binding SelectedFeed.SelectedItem, Mode=TwoWay}"
                         ItemTemplate="{StaticResource FeedItemTemplate}">

                </ListView>
            </Grid>
        </Grid>
    </Grid>
</UserControl>
